$(() => {
	$.ajax({
		url: `/admin/data/info`,
		success: res => {
			// console.log(res)
			$('.totalCount em').text(res.totalArticle)
			$('.totalCount_day em').text(res.dayArticle)
			$('.commentCount em').text(res.totalComment)
			$('.commentCount_day em').text(res.dayComment)
		}
	})
})

$(() => {
	$.ajax({
		url: `/admin/data/category`,
		success: res => {
			console.log(res)
			const options_pie = {
				// 鼠标悬停
				tooltip: {
					trigger: 'item',
					formatter: '{a} <br/>{b}: {c} ({d}%)'
				},
				// 顶部标签
				legend: {
					data: res.date.map(item => item.name)
				},
				// 调环装颜色
				color: ['#5885e8', '#13cfd5', '#00ce68', '#ff9565', '#20ff19'],
				series: [{
						name: '分类数量',
						type: 'pie',
						// selectedMode: 'single',
						radius: ['40%', '55%'],
					},
					{
						name: '分类数量',
						type: 'pie',
						radius: ['45%', '60%'],
						label: {
							formatter: '{a|{a}}{abg|}\n{hr|}\n  {b|{b}：}{c}  {per|{d}%}  ',
							backgroundColor: '#F6F8FC',
							borderColor: '#8C8D8E',
							borderWidth: 1,
							borderRadius: 4,
							rich: {
								a: {
									color: '#6E7079',
									lineHeight: 22,
									align: 'center'
								},
								hr: {
									borderColor: '#8C8D8E',
									width: '100%',
									borderWidth: 1,
									height: 0
								},
								b: {
									color: '#4C5058',
									fontSize: 14,
									fontWeight: 'bold',
									lineHeight: 33
								},
								per: {
									color: '#fff',
									backgroundColor: '#4C5058',
									padding: [3, 4],
									borderRadius: 4
								}
							}
						},
						data: res.date.map(item => ({
							'value': item.articles,
							'name': item.name
						}))
					}
				]
			}
			mycharts(options_pie, $('#pie_show'))
		}
	})

	$.ajax({
		url: `/admin/data/article`,
		success: res => {
			console.log(res)
			const options_article = {
				//设置echars顶部标题
				title: {
					text: '日新增文章趋势', // 标题文字
					left: 'center' //让标题居中
				},
				xAxis: {
					name: '日期',
					type: 'category',
					// 左右间隔
					boundaryGap: false,
					data: res.date.map(item => item.date)
				},
				yAxis: {
					name: '数量',
					type: 'value'
				},
				series: [{
					name: '日增长数值',
					data: res.date.map(item => item.count),
					type: 'line',
					smooth: true, //曲线
					// 开启节点文字
					label: {
						normal: {
							show: true,
							// 节点上方
							position: 'top'
						}
					},
					// 设置区域样式
					areaStyle: {
						color: {
							type: 'linear',
							x: 0,
							y: 0,
							x2: 0,
							y2: 1,
							// 渐变
							colorStops: [{
								offset: 0,
								color: 'red' // 0% 处的颜色
							}, {
								offset: 1,
								color: '#ffffff' // 100% 处的颜色
							}],
							global: false // 缺省为 false
						}
					}
				}],
				// 设置鼠标放到轴上即显示数据详情
				tooltip: {
					trigger: 'axis'
				},
				//设置工具栏
				toolbox: {
					show: true, //显示工具栏
					feature: {
						dataZoom: { //设置缩放
							yAxisIndex: 'none' // 限制y轴缩放，只能X轴缩放
						},
						dataView: {
							readOnly: false
						}, // 允许编辑原始数据
						magicType: {
							type: ['line', 'bar']
						}, // 设置图表可以从line(折现图)和bar(柱状图)之前来回切换
						restore: {}, // 设置重置数据
						saveAsImage: {} // 设置保存图片
					}
				}
			}
			const options_column = {
				tooltip: {
					trigger: 'axis'
				},
				xAxis: {
					type: 'category',
					data: res.date.map(item => item.date)
				},
				color: '#5885e8',
				yAxis: {
					type: 'value'
				},
				series: [{
					data: res.date.map(item => item.count),
					type: 'bar',
					showBackground: true,
					barWidth: 25, // 设置柱子的宽度
					backgroundStyle: {
						color: 'rgba(220, 220, 220, 0.8)'
					}
				}]
			}
			mycharts(options_article, $('#day_article_show'))
			mycharts(options_column, $('#column_show'))
		}
	})
	
	function mycharts(options, ele) {
		const myChars = echarts.init(ele[0])
		myChars.setOption(options)
	}
})


